<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from '@/utils/apis.js'

	// 表单数据
	const form = ref({
		receiver: '', // 收货人
		contact: '', // 联系方式
		fullLocation: '', // 省市区(前端展示)
		provinceCode: '', // 省份编码(后端参数)
		cityCode: '', // 城市编码(后端参数)
		countyCode: '', // 区/县编码(后端参数)
		address: '', // 详细地址
		isDefault: 0, // 默认地址，1为是，0为否
	})
	
	
	const query = defineProps({
		id: String
	})
	// 动态设置标题
	uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
	
	
	let onRegionChange = (ev) => {
		// 省市区(前端展示)
		form.value.fullLocation = ev.detail.value.join(' ')
		// 省市区(后端参数)
		const [provinceCode, cityCode, countyCode] = ev.detail.code
		// 合并数据 三行写成一行
		// form.value.provinceCode = provinceCode
		Object.assign(form.value, { provinceCode, cityCode, countyCode })
	}
	
	let onSwitchChange = (ev) => {
		form.value.isDefault = ev.detail.value ? 1 : 0
	}
	
	
	// 表单校验
	let rules = {
		receiver:{
			rules:[
				{required: true, errorMessage: '请输入姓名'}
			]
		},
		contact:{
			rules:[
				{required: true, errorMessage: '请输入联系方式'},
				{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
			]
		},
		fullLocation:{
			rules:[
				{required: true, errorMessage: '请选择所在地区'}
			]
		},
		address:{
			rules:[
				{required: true, errorMessage: '请输入详细地址'}
			]
		}
	}
	let formRef = ref()
	
	
	// 点击确定按钮
	let onSubmit = () => {
		formRef.value.validate(async valid =>{
			if(!valid){
				// 验证通过 valid返回null，取反返回true
				if(query.id){
					// 编辑修改
					await putMemberAddressByIdAPI(query.id, form.value)
				}else{
					// 新增
					await postMemberAddressAPI(form.value)
				}
				uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 400)
			}else{
				// 验证不通过 valid返回报错详情，取反返回false
				// uni.showToast({ icon: 'error', title: '请填写完整信息' })
				uni.$showMsg('请填写完整信息')
			}
		})
	}
	
	
	
	// 编辑页面 页面回显赋值
	let getMemberAddressByIdData = async() => {
		if(query.id){
			let res = await getMemberAddressByIdAPI(query.id)
			// 把数据合并到表单中
			Object.assign(form.value, res.result)
		}
	}
	onLoad(() => {
		getMemberAddressByIdData()
	})
	
</script>

<template>
	<view class="content">
		<uni-forms :rules="rules" :model="form" ref="formRef">
			<!-- 表单内容 -->
			<uni-forms-item class="form-item" name="receiver">
				<text class="label">收货人</text>
				<input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
			</uni-forms-item>
			<uni-forms-item class="form-item" name="contact">
				<text class="label">手机号码</text>
				<input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
			</uni-forms-item>
			<uni-forms-item class="form-item" name="fullLocation">
				<text class="label">所在地区</text>
				<picker
					@change="onRegionChange"
					class="picker"
					mode="region"
					:value="form.fullLocation.split(' ')">
					<view v-if="form.fullLocation">{{ form.fullLocation }}</view>
					<view v-else class="placeholder">请选择省/市/区(县)</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item class="form-item" name="address">
				<text class="label">详细地址</text>
				<input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
			</uni-forms-item>
			<uni-forms-item class="form-item">
				<label class="label">设为默认地址</label>
				<switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="form.isDefault == 1" />
			</uni-forms-item>
		</uni-forms>
	</view>
	<!-- 提交按钮 -->
	<button @click="onSubmit" class="button">保存并使用</button>
</template>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			// min-height: 96rpx;
			padding: 20rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>